<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 12 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item
      label="Username"
      name="username"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="formState.username" />
    </a-form-item>

    <a-form-item
      label="Password"
      name="password"
      :rules="[{ required: true, message: 'Please input your password!' }]"
    >
      <a-input-password v-model:value="formState.password" />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import { defineComponent, reactive, getCurrentInstance, onMounted } from "vue";
// import { post } from '@/netWorke/manage';
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const store = useStore();
    const router = useRouter();
    // vue3中没有this的概念，使用这种方式跳转路由
    const formState = reactive({
      username: "",
      password: "",
    });

    onMounted(() => {
      // mounted 生命周期函数
      // 
      console.log("执行上下文");
      // var a = 10;
      // function fn(b) {
      //   b = 20;
      //   console.log(a, b);
      // }
      // function fn1() {
      //   a = 100;
      //   fn(a);
      // }
      // fn(200);
      // fn1()
      /**
       * 1、调用fn的执行顺序
       * a = 10 ； => fn(200) =>创建fn的执行上下文 => 打印10,20
       * 
       * 2、调用fn1的执行顺序
       * a=10 =>  fn1 => 创建fn1的执行上下文 => a=100 => 创建fn的执行上下文 =>  打印100,20
       * 
       */



    });
    const onFinish = (values) => {
      console.log("Success:", values);
      // 调用登录方法
      store
        .dispatch("login", values)
        .then((res) => {
          // 成功
          router.push("/about");
        })
        .catch((err) => {
          // 失败
        });
    };
    const onFinishFailed = (errorInfo) => {
      console.log("Failed:", errorInfo);
    };
    return {
      formState,
      onFinish,
      onFinishFailed,
    };
  },
});
</script>
